<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
      <el-form-item label="是否开启积分" prop="integralFlag">
        <el-radio-group v-model="form.integralFlag">
          <el-radio label="0">关闭</el-radio>
          <el-radio label="1">开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-show="form.integralFlag == 1">
        <el-form-item
          label="积分规则"
          prop="itemsDetail"
          :required="form.integralFlag == 1"
        >
          <div
            v-for="(item, index) in form.itemsDetail"
            :key="index"
            class="intRule"
          >
            <div style="margin-bottom: 5px; display: flex">
              <div style="width: 71px">适用油品</div>
              <el-select
                v-model="item.oilId"
                placeholder="请选择油品"
                clearable
                size="small"
                @change="oilNameChang(item, index)"
              >
                <el-option
                  v-for="ele in oilNameOptions"
                  :key="ele.oilId"
                  :label="ele.oilName"
                  :value="ele.oilId"
                ></el-option>
              </el-select>
            </div>
            <div
              v-if="item.oilType != 3"
              style="margin-bottom: 5px; display: flex"
            >
              <div style="width: 71px">规则类型</div>
              <el-select
                v-model="item.ruleType"
                placeholder="请选择规则"
                clearable
                size="small"
              >
                <el-option label="以订单实付累计" value="1"></el-option>
                <el-option label="以订单应付累计" value="2"></el-option>
                <el-option label="以加油升数累计" value="3"></el-option>
              </el-select>
            </div>
            <!-- <div v-if="item.oilType != 3"> 
              适用等级
              <el-select
                v-model="item.grade"
                placeholder="请选择等级"
                clearable
                size="small"
                @change="gradeChange(item)"
              >
                <el-option
                  v-for="ele in item.gradeList || []"
                  :key="ele.id"
                  :label="ele.grade"
                  :value="ele.id.toString()"
                ></el-option>
                <el-option key="0" label="所有人" value="0"></el-option>
              </el-select>
            </div> -->
            <div style="margin-bottom: 5px; display: flex">
              <div style="margin-left: 45px">满</div>
              <el-input-number
                style="width: 150px; margin: 0px 12px"
                v-model="item.ruleTerms"
                :min="0"
                size="small"
              />
              元（L） 开始积分
            </div>
            <div style="margin-bottom: 5px; display: flex">
              <div style="margin-left: 15px">每消费</div>
              <el-input-number
                style="width: 150px; margin: 0px 13px"
                v-model="item.saleAmt"
                size="small"
                :min="0"
              />元
            </div>
            <div style="margin-bottom: 5px; display: flex">
              <div style="margin-left: 30px">获得</div>
              <el-input-number
                style="width: 150px; margin: 0px 12px"
                v-model="item.integral"
                size="small"
                :min="0"
              />积分
            </div>
            <div style="margin-bottom: 5px; display: flex">
              <div style="margin-left: 30px">获得</div>
              <el-input-number
                style="width: 150px; margin: 0px 12px"
                v-model="item.growValue"
                :min="0"
                size="small"
              />成长值
            </div>
            <!-- <div style="margin-bottom: 5px">
              POS现金
              <el-input-number
                style="width: 150px; margin: 0px 20px"
                v-model="item.cashIntegral"
                :min="0"
                size="small"
              />积分
            </div> -->
            <div style="margin-bottom: 5px">
              生效时间
              <el-radio-group
                v-model="item.effectiveTimeType"
                style="margin-left: 11px; margin-top: 5px"
                @input="inputRadio(index)"
              >
                <el-radio label="permanent_validity">永久有效</el-radio>
                <el-radio label="specify_time">指定时间</el-radio>
                <el-radio label="daily_repeat">每日重复</el-radio>
                <el-radio label="weekly_repeat">每周重复</el-radio>
                <el-radio label="monthly_repeat">每月重复</el-radio>
              </el-radio-group>
              <div
                v-if="
                  item.effectiveTimeType !== 'permanent_validity' &&
                  item.effectiveTimeType
                "
                style="
                  background-color: #f5f7fa;
                  width: 530px;
                  margin-left: 70px;
                  padding: 10px 10px 10px 20px;
                  display: flex;
                "
              >
                <div style="width: 70px">周期规则：</div>
                <div
                  style="display: flex; flex-direction: column; width: 150px"
                >
                  <!-- 每周重复 -->
                  <el-checkbox-group
                    v-if="item.effectiveTimeType === 'weekly_repeat'"
                    v-model="item.weeklySelection"
                    size="small"
                    style="width: 350px"
                  >
                    <el-checkbox-button
                      v-for="city in weeklySelection"
                      :label="city"
                      :key="city"
                      >{{ city }}</el-checkbox-button
                    >
                  </el-checkbox-group>

                  <!-- 每月重复 -->
                  <el-checkbox-group
                    v-if="item.effectiveTimeType === 'monthly_repeat'"
                    v-model="item.monthlySelection"
                    size="small"
                    style="width: 350px"
                  >
                    <el-checkbox-button
                      v-for="city in monthlySelection"
                      :label="city"
                      :key="city"
                      >{{ city }}</el-checkbox-button
                    >
                  </el-checkbox-group>
                  <div
                    style="width: 700px; display: flex; margin-top: 5px"
                    v-if="item.effectiveTimeType === 'specify_time'"
                    v-for="(
                      details, indexDetails
                    ) in item.integralTimeRuleDetails"
                  >
                    <el-date-picker
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width: 330px; margin-right: 20px"
                      size="small"
                      v-model="details.datetime"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="changeDatetime(index)"
                    >
                    </el-date-picker>
                    <el-button
                      style="width: 30px; height: 30px"
                      size="mini"
                      icon="el-icon-minus"
                      circle
                      v-if="
                        indexDetails != 0 ||
                        item.integralTimeRuleDetails.length > 1
                      "
                      @click="minusButton(index, indexDetails)"
                    ></el-button>
                    <el-button
                      style="width: 30px; height: 30px"
                      size="mini"
                      icon="el-icon-plus"
                      circle
                      v-if="
                        indexDetails + 1 === item.integralTimeRuleDetails.length
                      "
                      @click="plusButton(index)"
                    ></el-button>
                  </div>
                  <div
                    v-for="(
                      details, indexDetails
                    ) in item.integralTimeRuleDetails"
                    style="width: 700px; display: flex; margin-top: 5px"
                    v-if="
                      item.effectiveTimeType === 'monthly_repeat' ||
                      item.effectiveTimeType === 'weekly_repeat' ||
                      item.effectiveTimeType === 'daily_repeat'
                    "
                  >
                    <el-time-picker
                      style="width: 330px; margin-right: 20px"
                      is-range
                      size="small"
                      value-format="HH:mm:ss"
                      v-model="details.time"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择时间范围"
                      @change="changeTime(index)"
                    >
                    </el-time-picker>
                    <el-button
                      style="width: 30px; height: 30px"
                      size="mini"
                      icon="el-icon-minus"
                      circle
                      v-if="
                        indexDetails != 0 ||
                        item.integralTimeRuleDetails.length > 1
                      "
                      @click="minusButton(index, indexDetails)"
                    ></el-button>
                    <el-button
                      style="width: 30px; height: 30px"
                      size="mini"
                      icon="el-icon-plus"
                      circle
                      v-if="
                        indexDetails + 1 === item.integralTimeRuleDetails.length
                      "
                      @click="plusButton(index)"
                    ></el-button>
                  </div>
                </div>
              </div>
            </div>
                 
            <div>
              <el-button type="danger" @click="delItem(index)" size="small"
                >删除</el-button
              >
              <el-button
                v-show="index == form.itemsDetail.length - 1"
                type="success"
                @click="addItem()"
                size="small"
                >新增</el-button
              >
            </div>
          </div>
        </el-form-item>

        <el-form-item
          label="积分有效期"
          prop="integralTermSetting"
          :required="form.integralFlag == 1"
        >
          <el-radio-group v-model="form.integralTermSetting">
            <el-radio label="1">永久有效</el-radio>
            <el-radio label="2">指定清空积分时间</el-radio>
          </el-radio-group>
          <div v-show="form.integralTermSetting == 2">
            <el-date-picker
              clearable
              size="small"
              style="width: 200px; margin-left: 10px"
              v-model="form.integralEmptyTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
        </el-form-item>

        <!-- <el-form-item
          label="积分规则失效时间"
          prop="termDateManage"
          :required="form.integralFlag == 1"
        >
          <el-radio-group v-model="form.termDateManage">
            <el-radio label="1">永久有效</el-radio>
            <el-radio label="2">指定活动结束时间</el-radio>
          </el-radio-group>
          <div v-show="form.termDateManage == 2">
            <el-date-picker
              clearable
              size="small"
              style="width: 200px; margin-left: 10px"
              v-model="form.emptyDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
        </el-form-item> -->

        <el-form-item
          label="多倍积分"
          prop="integralActivity"
          :required="form.integralFlag == 1"
        >
          <el-radio-group v-model="form.integralActivity">
            <el-radio label="0">关闭</el-radio>
            <el-radio label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="周期类型"
          prop="datePicker"
          :required="form.integralActivity == 1"
          v-show="form.integralActivity == 1"
        >
          <el-select
            v-model="form.datePicker"
            clearable
            size="small"
            @change="timeClear"
          >
            <el-option label="每周指定日" value="1"></el-option>
            <el-option label="每月指定日" value="2"></el-option>
            <el-option label="固定活动日" value="3"></el-option>
          </el-select>
          <div
            v-show="form.datePicker != 3"
            style="
              display: flex;
              flex-wrap: wrap;
              border-style: solid;
              border-color: #f5f7fa;
            "
          >
            <div
              v-for="(item, index) in timeSelect[form.datePicker]"
              :key="index"
              style="margin: 3px"
            >
              <div
                class="hover-style"
                style="
                  border-radius: 5px;
                  font-weight: bold;
                  font-size: 12px;
                  cursor: pointer;
                "
                @click="clickCalendar(index)"
              >
                <div>{{ item }}</div>
                <div
                  v-if="form.collectClickCalendar.indexOf(index) > -1"
                  style="
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    background-color: red;
                    position: relative;
                    left: calc(50% - 2px);
                  "
                ></div>
                <div v-else style="width: 4px; height: 4px"></div>
              </div>
            </div>
          </div>
          <div v-show="form.datePicker == 3">
            <el-date-picker
              clearable
              size="small"
              style="margin-left: 10px; width: 200px"
              v-model="form.collectClickDay"
              type="dates"
              value-format="yyyy-MM-dd"
              placeholder="选择提醒时间设置"
            >
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item
          label="积分比例"
          prop="integralProportion"
          v-show="form.integralActivity == 1"
          :required="form.integralActivity == 1"
        >
          <el-input-number
            v-model="form.integralProportion"
            :min="1"
            placeholder="请输入加倍比例"
            size="small"
          />
          <span>倍</span>
        </el-form-item>

        <el-form-item> </el-form-item>
        <el-row v-show="form.integralActivity == 1">
          <el-col :span="8" style=""> </el-col>

          <el-col :span="8"> </el-col>
        </el-row>
        <el-form-item
          label="积分轮播图"
          prop="imgFileList"
          :rules="{
            required: form.integralFlag == 1,
            message: '标签不能为空,不需要请删除此项',
            trigger: 'blur',
          }"
        >
          <el-upload
            class="avatar-uploader"
            :action="addressUrl"
            :headers="headers"
            multiple
            list-type="picture-card"
            :limit="5"
            :file-list="form.imgFileList"
            accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
            :before-upload="beforeAvatarUpload"
            :on-remove="handleRemove"
            :on-success="handlepaymentSuccess"
          >
            <i class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，最多上传5张且单张图片不超过1M
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="submitForm"
        :disabled="false"
        style="margin-left: 200px; margin-bottom: 50px"
        >确 定 执 行</el-button
      >
    </div>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
import { getToken } from "@/utils/auth";
import {
  addRule,
  updateRule,
  oilNameList,
  gradeList,
  listRuleOne,
} from "@/api/integral/rule";
import { queryOilType } from "@/utils/oil";
import { getOilList, addOil, upOil, delOil, oilName } from "@/api/dept";

export default {
  name: "Point_Rule",
  data() {
    let validateItemsDetail = (rule, value, callback) => {
      if (this.form.integralFlag == 0) {
        callback();
        return;
      }
      if (this.form.itemsDetail.length <= 0) {
        callback(new Error("请先配置设置规则"));
        return;
      }
      this.form.itemsDetail.forEach((ele) => {
        if (!ele.oilId || !ele.ruleTerms || !ele.saleAmt || !ele.integral) {
          callback(new Error("请检查规则完整性"));
          return;
        }
        if (ele.oilType != 3) {
          if (!ele.ruleType) {
            callback(new Error("请检查规则完整性"));
            return;
          }
        }
      });
      if (this.form.itemsDetail.length > 0) {
        // 永久有效 permanent_validity
        // 指定时间 specify_time
        // 每日重复 daily_repeat
        // 每周重复 weekly_repeat
        // 每月重复 monthly_repeat
        this.form.itemsDetail.forEach((ele) => {
          if (!ele.effectiveTimeType) {
            return callback(new Error("请检查规则完整性"));
          }

          if (ele.effectiveTimeType === "specify_time") {
            ele.integralTimeRuleDetails.forEach((item) => {
              if (!item.datetime) {
                return callback(new Error("请检查规则完整性"));
              }
            });
          }
          if (
            ele.effectiveTimeType === "daily_repeat" ||
            ele.effectiveTimeType === "weekly_repeat" ||
            ele.effectiveTimeType === "monthly_repeat"
          ) {
            ele.integralTimeRuleDetails.forEach((item) => {
              if (!item.time) return callback(new Error("请检查规则完整性"));
            });
          }
          if (ele.effectiveTimeType === "weekly_repeat") {
            if (ele.weeklySelection.length == 0) {
              return callback(new Error("请检查规则完整性"));
            }
          }
          if (ele.effectiveTimeType === "monthly_repeat") {
            if (ele.monthlySelection.length == 0) {
              return callback(new Error("请检查规则完整性"));
            }
          }
        });
      }
      callback();
    };
    let validateIntegralTermSetting = (rule, value, callback) => {
      if (!this.form.integralTermSetting) {
        callback(new Error("请选择积分有效期"));
        return;
      }
      if (this.form.integralTermSetting == 2) {
        if (!this.form.integralEmptyTime) {
          callback(new Error("请填写积分指定的到期时间"));
          return;
        }
      }
      callback();
    };
    let validateTermDateManage = (rule, value, callback) => {
      if (!this.form.termDateManage) {
        callback(new Error("请选择积分活动的结束时间"));
        return;
      }
      if (this.form.termDateManage == 2) {
        if (!this.form.emptyDate) {
          callback(new Error("请填写积分活动的结束时间"));
          return;
        }
      }
      callback();
    };
    let validateDatePicker = (rule, value, callback) => {
      if (this.form.integralActivity == 0) {
        callback();
        return;
      }
      if (!this.form.datePicker) {
        callback(new Error("请选择多倍积分的周期类型"));
        return;
      }
      if (this.form.datePicker == 1 || this.form.datePicker == 2) {
        if (this.form.collectClickCalendar.length <= 0) {
          callback(new Error("请选择多倍积分的时间"));
          return;
        }
      }
      if (this.form.datePicker == 3) {
        if (
          this.form.collectClickDay == null ||
          this.form.collectClickDay.length <= 0
        ) {
          callback(new Error("请填写指定的多倍积分日"));
          return;
        }
      }
      callback();
    };
    return {
      weeklySelection: ["1", "2", "3", "4", "5", "6", "7"],
      monthlySelection: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
      ],
      oilNameOptions: [],
      dialogImageUrl: "",
      num: 0,
      dialogVisible: false,
      // 表单参数
      form: {
        itemsDetail: [{}],
        imgFileList: [],
        collectClickCalendar: [], // 收集固定日期选择的日子
        collectClickDay: [],
      },
      rules: {
        integralFlag: [
          { required: true, message: "请选择是否开启积分", trigger: "change" },
        ],
        integralTermSetting: [
          { validator: validateIntegralTermSetting, trigger: "change" },
        ],
        // termDateManage:[{ required: true, message: "请选择是否开启积分", trigger: "change" }],
        // integralActivity:[{ required: true, message: "请选择是否开启积分", trigger: "change" }],
        // imgFileList: [{ required: true, message: "", trigger: "change" }],
        itemsDetail: [{ validator: validateItemsDetail, trigger: "change" }],
        termDateManage: [
          { validator: validateTermDateManage, trigger: "change" },
        ],
        datePicker: [{ validator: validateDatePicker, trigger: "change" }],
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },

      timeSelect: [
        ,
        ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
        [
          "01",
          "02",
          "03",
          "04",
          "05",
          "06",
          "07",
          "08",
          "09",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
          "24",
          "25",
          "26",
          "27",
          "28",
          "29",
          "30",
          "31",
        ],
      ],
      addressUrl: process.env.VUE_APP_BASE_API + "/common/upload",
    };
  },
  created() {
    this.init();
  },
  methods: {
    // 每日每周每月选择了时间
    changeTime(index) {
      console.log("每日每周每月选择了时间", this.form.itemsDetail);
      this.form = { ...this.form };
      this.$refs["form"].validate((valid) => {});
    },

    // 指定时间选择时间
    changeDatetime(index) {
      console.log("每日每周每月选择了时间", this.form.itemsDetail);
      this.form = { ...this.form };
      this.$refs["form"].validate((valid) => {});
    },

    // 点击-时间
    minusButton(index, indexDetails) {
      this.form.itemsDetail[index].integralTimeRuleDetails.splice(
        indexDetails,
        1
      );
      this.form = { ...this.form };
      this.$refs["form"].validate((valid) => {});
    },

    // 点击+时间
    plusButton(index) {
      this.form.itemsDetail[index].integralTimeRuleDetails.push({
        time: null,
        datetime: null,
      });
      this.form = { ...this.form };
      this.$refs["form"].validate((valid) => {});
    },

    //生效时间
    inputRadio(index) {
      // 周选择 weeklySelection
      // 月选择 monthlySelection
      this.form.itemsDetail[index].weeklySelection = [];
      this.form.itemsDetail[index].monthlySelection = [];
      this.form.itemsDetail[index].integralTimeRuleDetails = [];
      this.form.itemsDetail[index].integralTimeRuleDetails.push({
        time: null,
        datetime: null,
      });
    },

    init() {
      this.listRule();
      this.listOilName();
    },

    listOilName() {
      // getOilList({
      //   enterpriseId: 246,
      // }).then((response) => {
      //   this.oilNameOptions = response.rows;
      // });
      let enterpriseId;
      if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
        enterpriseId = this.presentEnterprise.enterpriseId;
      }
      oilName({
        enterpriseId,
      }).then((response) => {
        this.oilNameOptions = response.data;
      });
    },
    listRule() {
      listRuleOne({
        pageNum: 1,
        pageSize: 100,
      }).then((response) => {
        const res = cloneDeep(response);
        console.log("返回", res);

        const imgFileList = response.data.imgFileList;
        response.data.imgFileList = [];
        this.form = response.data;
        setTimeout(() => {
          this.form = { ...response.data, imgFileList };
        }, 1000);
        this.form.collectClickCalendar = [];
        this.form.collectClickDay = "";

        if (!this.form.itemsDetail || this.form.itemsDetail.length == 0) {
          this.form.itemsDetail = [{}];
        } else {
          // 周选择 weeklySelection
          // 月选择 monthlySelection
          this.form.itemsDetail.forEach((item, index) => {
            if (res.data.itemsDetail[index].weeklySelection) {
              this.form.itemsDetail[index].weeklySelection =
                res.data.itemsDetail[index].weeklySelection.split(",");
            } else {
              this.form.itemsDetail[index].weeklySelection = [];
            }
            if (res.data.itemsDetail[index].monthlySelection) {
              this.form.itemsDetail[index].monthlySelection =
                res.data.itemsDetail[index].monthlySelection.split(",");
            } else {
              this.form.itemsDetail[index].monthlySelection = [];
            }

            if (
              res.data.itemsDetail[index].integralTimeRuleDetails.length === 0
            ) {
              this.form.itemsDetail[index].integralTimeRuleDetails = [
                {
                  id: null,
                  ruleDetailId: null,
                  ruleDetailIdtime: null,
                  datetime: null,
                },
              ];
            } else {
              let integralTimeRuleDetails = [];
              cloneDeep(
                res.data.itemsDetail[index].integralTimeRuleDetails
              ).forEach((item) => {
                console.log("时间", item);
                // 生效开始时间  effectiveTimeStart       time
                // 生效结束时间   effectiveTimeEnd        time
                // 生效指定开始时间   effectiveDateStart   datetime
                // 生效指定结束时间   effectiveDateEnd     datetime
                if (item.effectiveTimeStart) {
                  console.log("时间1", item);
                  integralTimeRuleDetails.push({
                    id: item.id,
                    ruleDetailId: item.ruleDetailId,
                    time: [item.effectiveTimeStart, item.effectiveTimeEnd],
                  });
                } else if (item.effectiveDateStart) {
                  console.log("时间2", item);
                  integralTimeRuleDetails.push({
                    id: item.id,
                    ruleDetailId: item.ruleDetailId,
                    datetime: [item.effectiveDateStart, item.effectiveDateEnd],
                  });
                }
              });
              this.form.itemsDetail[index].integralTimeRuleDetails =
                integralTimeRuleDetails;
            }
          });
        }
        if (this.form.datePicker == "1" || this.form.datePicker == "2") {
          this.form.collectClickCalendar = this.form.datePickerTime
            .split(",")
            .map(parseFloat);
        } else if (this.form.datePicker == "3") {
          if (this.form.datePickerTime.length == 0) {
            this.form.collectClickDay = [];
          } else {
            this.form.collectClickDay = this.form.datePickerTime.split(",");
          }
        }
        console.log("结果", this.form.itemsDetail);
        this.form = { ...this.form };
      });
    },
    timeClear() {
      this.form.collectClickCalendar = [];
      this.form.collectClickDay = [];
    },
    gradeChange(item) {
      setTimeout(() => {
        this.form = { ...this.form };
      }, 0);
    },
    //添加行
    addItem() {
      this.form.itemsDetail.push({
        integralTimeRuleDetails: [],
        effectiveTimeType: "permanent_validity",
        monthlySelection: [],
        weeklySelection: [],
      });
    },
    // 删除行
    delItem(index) {
      this.form.itemsDetail.splice(index, 1);
      if (this.form.itemsDetail.length <= 0) {
        this.form.itemsDetail = [
          {
            integralTimeRuleDetails: [],
            effectiveTimeType: "permanent_validity",
            monthlySelection: [],
            weeklySelection: [],
          },
        ];
      }
    },
    delNoil() {
      this.form.notOilList = [{}];
    },
    oilNameChang(item, index) {
      item.grade = null;
      item.gradeList = [];
      this.form = { ...this.form };
      gradeList({
        oilId: item.oilId,
      }).then((response) => {
        item.gradeList = response.rows;
        this.form = {
          ...this.form,
        };
      });
      queryOilType(item.oilId).then((res) => {
        item.oilType = res;
        this.form = {
          ...this.form,
        };
      });
    },
    handleRemove(file, fileList) {
      this.form.imgFileList = fileList;
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 1;
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 1MB!");
      }
      return isLt5M;
    },
    //上传成功
    handlepaymentSuccess(response, file, fileList) {
      this.form.imgFileList = [
        ...this.form.imgFileList,
        {
          name: file.name,
          url: response.url,
        },
      ];
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.datePicker == "1" || this.form.datePicker == "2") {
            this.form.datePickerTime =
              this.form.collectClickCalendar.toString();
          } else {
            this.form.datePickerTime = this.form.collectClickDay.toString();
          }

          const form = cloneDeep(this.form);
          if (form.itemsDetail.length) {
            // 周选择 weeklySelection
            // 月选择 monthlySelection
            form.itemsDetail.forEach((item) => {
              item.weeklySelection = item.weeklySelection.join(",");
              item.monthlySelection = item.monthlySelection.join(",");
              const integralTimeRuleDetails = cloneDeep(
                item.integralTimeRuleDetails
              );
              item.integralTimeRuleDetails = [];
              integralTimeRuleDetails.forEach((itemDetails) => {
                if (itemDetails.time) {
                  2;
                  item.integralTimeRuleDetails.push({
                    effectiveTimeStart: itemDetails.time[0],
                    effectiveTimeEnd: itemDetails.time[1],
                  });
                } else if (itemDetails.datetime) {
                  item.integralTimeRuleDetails.push({
                    effectiveDateStart: itemDetails.datetime[0],
                    effectiveDateEnd: itemDetails.datetime[1],
                  });
                }
              });
            });
          }

          if (this.form.id != null) {
            updateRule(form).then((response) => {
              this.msgSuccess("更新成功");
              this.listRule();
            });
          } else {
            addRule(form).then((response) => {
              this.msgSuccess("新增成功");
              this.listRule();
            });
          }
        }
      });
    },

    clickCalendar(index) {
      if (this.form.collectClickCalendar.indexOf(index) === -1) {
        this.form.collectClickCalendar.push(index);
      } else if (this.form.collectClickCalendar.indexOf(index) > -1) {
        const temp = this.form.collectClickCalendar.findIndex((ele) => {
          return ele == index;
        });
        this.form.collectClickCalendar.splice(temp, 1);
      }
      this.$refs.form.validateField("datePicker");
      this.form = { ...this.form };
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep.el-checkbox-button {
  margin-right: 10px;

  .el-checkbox-button__inner {
    text-align: center;
    line-height: 32px;
    padding: 0px;
    width: 32px;
    height: 32px;
    color: #409eff;
    border: 1px solid #409eff !important;
    border-radius: 5px;
  }
}
::v-deep.el-checkbox-button.is-checked .el-checkbox-button__inner {
  color: #fff !important;
  background-color: #409eff;
}
.hover-style:hover {
  color: white;
  background-color: blue;
}
.intRule {
  padding: 10px 0px;
  margin-top: 10px;
  margin-bottom: 15px;
  box-shadow: 0px 2px 9px 4px rgba(16, 178, 125, 0.2);
  background: rgba(255, 255, 255, 0.08);
  width: 680px;
  border-radius: 20px;
  > div {
    margin-left: 40px;
  }
}
</style>
